<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改手机号</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
	<style>
        body, html {
            height: 100%;
        }
        .button.green {
            background-color: #009688;
        }
        .button.green:active{
            background-color: #0068B0;
        }
        .button {
            display: block;
            color: white;
            margin: 0px 0px;
            text-align: center;
            border-radius: 3px;
            height: 40px;
            line-height: 40px;
        }
        .login-error {
            color: #FF0000;
            font-size: 18px;
            text-indent: 2em;
            display: none;
            padding-top: 8px;
        }
        .hint{
            margin-top:20px;
        }
        .hint span{
            text-align:center;
            display:block;
        }
        .content{
            position:absolute;
            width:100%;
            top:20%;
        }
        input[type="password"],input[type="text"]{
            margin-bottom:0;
        }
        .red{
        	border:1px solid red !important;
        }
        .hidden{
        	display:none;
        }
	</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav">
        <div class="aui-pull-left aui-btn" id="btn_return" onclick="api.closeWin();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">修改手机号</div>
    </header>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
    		<li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input">
                        <input id="password" type="password" maxlength="20" class="txt" placeholder="密码">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input">
                        <input id="phone" type="text" maxlength="11" class="txt" placeholder="手机号">
                    </div>
                    <div class="aui-list-item-right">
	                    <div class="aui-btn" id="sendVerify" status="1" tapmode onclick="getVerify()">获取验证码</div>
                        <!--<div class="aui-btn aui-btn-info aui-margin-r-15" onclick="changePwd()">发送验证码</div>-->
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input">
                        <input id="checknum" type="text" maxlength="6" class="txt" placeholder="验证码">
                    </div>
                </div>
            </li>
           <!-- <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
                    <div class="aui-btn aui-btn-info aui-margin-r-5" onclick="changePwd()">提交</div>
                </div>
            </li>-->
         </ul>
    </div>
    <div class="button green" tapmode="" onclick="changePhone()">
       	 确认修改
    </div>
</body>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
	var verify_flag = false;//智能验证通过标志
    var times,isinerval;
	apiready = function(){
		require(["zepto","api","md5","common"],function(){
			var header = $api.dom('header');
			$api.fixStatusBar(header);
			
			$(".txt").on("focus",function(){
	        	$(this).removeClass("red");	
	    	});
	    	
	    	smsVerify = api.require('smsVerify');
            smsVerify.register(function(ret, err){
                if(ret.status){
                    console.log("成功");
                }else{
                    console.log("失败");
                }
            });
		})
	};
	 function changePhone(){
    	var retmsg = check();
    	if(retmsg){
    		api.toast({
                msg:retmsg
            });
    		return;
    	}
    	if(verify_flag)
    		ajaxModifyPhone();
    	else
    		verifyCode();
    }
	function ajaxModifyPhone(){
		$zb.prefs.getPrefs('token',function(result) {
	        if(result.value) {
				$zb.requestForData({values:{token:result.value,password:$zb.getmd5text($('#password').val()),phone:$('#phone').val()}}, 'user','changePhone', function(ret) {
		            if (ret.status == 'OK') {
		           		api.execScript({
						    name: 'user_detail_win',
						    frameName: 'user_detail_frm',
						    script: 'updateInfo()'
						});
						api.toast({ msg: '修改成功' });
						api.closeWin();
		            }else {
		                api.toast({ msg: ret.status });
		            }
		        });
	        }
	    });
	}
	function check(){
		var ret_message=null;
    	if(!$("#password").val()){
    		ret_message = "请输入密码";
    		$("#password").addClass("red");
    		return ret_message;
    	}
    	if(!$("#phone").val()){
    		ret_message = "请输入手机号";
    		$("#password_new").addClass("red");
    		return ret_message;
    	}
	}
	
	 function getVerify(){
    	if(!checkMobile($("#phone").val())){
    		$("#phone").addClass("red");
    		api.toast({
                msg:'手机号码有误'
            });
    		return;
    	}
    	var status = $("#sendVerify").attr('status');
        if(status!=1){
            return;
        }
        $("#sendVerify").removeAttr('onclick');
        api.parseTapmode();
        $("#sendVerify").html('<span id="GetVerify">60</span>S');
        times = 59;
        isinerval = setInterval("CountDown()", 1000);
        smsVerify.sms({
            phone:$("#phone").val(),
            country:"86"
        },function(ret, err){
            if(ret.status){
                if( ret.smart == true ){    // 安卓版特有功能 智能验证
                	verify_flag = true;
                	$("#verify").addClass("hidden");
                    api.toast({msg: '智能验证成功，无需验证码验证'});
                }else{
                    api.toast({msg: '短信发送成功'});
                }
            }else{
                api.toast({msg: err.msg});
            }
        });
    }
    function CountDown() {
        if (times < 1) {
            $("#sendVerify").attr('onclick','getVerify()');
            $("#sendVerify").attr('status',1);
            api.parseTapmode();
            $("#sendVerify").html('重新获取');
            clearInterval(isinerval);
            return;
        }
        $("#GetVerify").html(times);
        times--;
    }
 	function checkMobile(str) {
		var re = /^1\d{10}$/;
		if (re.test(str)) {
			return true;
		} else {
			return false;
		}
	}
    function verifyCode(){
        smsVerify.verify({
            phone:$("#phone").val(),
            country:"86",
            code:$("#checknum").val()
        },function(ret, err){
            if(ret.status){
            	ajaxModifyPhone();
            }else{
            	$("#checknum").addClass("red");
                api.alert({msg: err.msg});
            }
        });
    }
</script>
</html>